<template>
    <div class="Adddepartment">
        <div class="dep-cont">
            <div class="dep-header">
            <a @click="showdepar" v-bind:class="{active:isactive}">添加部门</a>
            <a @click="showamend" v-bind:class="{active:!isactive}">修改部门</a>
            </div>
            <home-adddepar v-show="showdeparbox"></home-adddepar>
            <home-addamend v-show="showamendbox"></home-addamend>
        </div>
        
    </div>
    
</template>

<script>
import HomeAdddepar from '../components/Adddepar'
import HomeAddamend from '../components/Addamend'
export default {
     name:'Adddepartment',
     components: {
         HomeAdddepar,
         HomeAddamend
        },
      data(){
        return{
          showdeparbox:true,
          showdeparboxs:false,
          isactive:true,
          showamendbox:false
        }
      },
      methods:{
        showdepar(){
           this.showdeparbox=true;
           this.showamendbox=false;
           this.isactive=true;
        },
        showamend(){
            this.showdeparbox=false;
           this.showamendbox=true;
           this.isactive=false;

        }
      }

}
</script>
<style >
.active{
    color: #000;
}
.Adddepartment{
    margin-left: 4rem;
    background-color: #f3f3f3;
    height: 600px;
    position: relative;
    padding-top: 30px;
}
.dep-cont{
     margin: 0 auto;
   
    width: 80%;
    background-color: #fff;
}
.dep-header{
    height: .8rem;
    font-size: 18px;
    color: #1cb394;
    line-height: .8rem;
    border-bottom: 1px solid #666;
    margin-left: 20px;
}
</style>